<template>
	<div>
		<div class="header">
			<a href="javascript:history.back(-1)"><img src="../../assets/liu/左箭头.png" /></a>
			<div class="content ">
				<span>购物车</span>
			</div>
			</div>
		<div id="cart">
    <section class="cartMain">
        <div class="cartMain_hd">
            <ul class="order_lists cartTop">
                <li class="list_chk">
                    <!--所有商品全选-->
                    <input type="checkbox" id="all" class="whole_check" @click="cartchoose()">
                    全选
                </li>
                <li class="list_con">商品信息</li>
                <li class="list_price">单价</li>
                <li class="list_amount">数量</li>
                <li class="list_sum">金额</li>
                <li class="list_op">操作</li>
               
            </ul>
        </div>

         <div class="cartBox" v-for="item in fetchData.list">
            <div class="shop_info">
                <div class="all_check">
                    <input type="checkbox" id="shop_a" class="shopChoice">
                    <label for="shop_a" class="shop" :class="item.check?'mark':''" @click="shopchoose(item)"></label>
                </div>
                <div class="shop_name">
                    店铺：<a href="javascript:;">{{item.shop_name}}</a>
                </div>
            </div>
            <div class="order_content">
                <ul class="order_lists" v-for="pro in item.products">
                    <li class="list_chk">
                        <input type="checkbox" id="checkbox_2" class="son_check">
                        <label for="checkbox_2" :class="pro.checked?'mark':''" @click="choose(item,pro)"></label>
                    </li>
                    <li class="list_con">
                        <div class="list_img"><a href="javascript:;"><img :src="pro.img" alt=""></a></div>
                        <div class="list_text"><a href="javascript:;">{{pro.text}}</a>
                        <span class="list_custom">定制</span>
                        </div>
                    </li>
                    <li class="list_price">
                        <p class="price">￥{{pro.price}}</p>
                        <div class="charge">
                            <p>更多促销</p>
                        </div>
                    </li>
                    <li class="list_amount">
                        <div class="amount_box">
                            <a href="javascript:;" class="reduce reSty" @click="reduce(pro)">-</a>
                            <input type="text" v-model="pro.num" class="sum" v-on:input="calculate(pro)">
                            <a href="javascript:;" class="plus" @click="add(pro)">+</a>
                        </div>
                    </li>
                    <li class="list_sum">
                        <p class="sum_price">￥{{pro.sum}}</p>
                    </li>
          
                </ul>
            </div>
        </div> 
        <!--底部-->
        <div class="bar-wrapper">
            <div class="bar-right">
                <div class="piece">已选商品<strong class="piece_num">{{this.fetchData.allnum}}</strong>件</div>
                <div class="totalMoney">共计: <strong class="total_text">￥{{this.fetchData.allsum}}</strong></div>
                <div class="calBtn">
                		<a href="#/Pworder">结算</a>
                </div>
            </div>
        </div>
    </section>
    <section class="model_bg"></section>
    
    </div>
	</div>
</template>

<script>
	export default {
		name: 'car',
		data() {
			return {
				fetchData: {
					list: [{
							shop_id: 1,
							shop_name: '搜猎人艺术生活',
							products: [{
									pro_id: 101,
									text: '洗面奶',
									price: 480,
									num: 1,
									sum: 480,
									checked: false //商品选中状态
								}

							],
							check: false, //店铺选中状态
							choose: 0, //商品选中个数
					}
						
				
					],
					status: false, //全选选中状态
					allchoose: 0, //店铺选中个数
					allsum: 0, //总计价格
					allnum: 0, //总计数量
				}
			}
		},
		methods: {
			choosetrue(item, pro) {
				pro.checked = true //商品选中状态
					++item.choose === item.products.length ? item.check = true : '' /
				item.check ? ++this.fetchData.allchoose === this.fetchData.list.length ? this.fetchData.status = true : this.fetchData.status = false : ''     
				this.fetchData.allsum += pro.sum
				this.fetchData.allnum += parseInt(pro.num)
			},
			choosefalse(item, pro) {
				pro.checked = false //将商品选中状态改为false
					--item.choose //选中商品数量-1
				if(item.check) { //如果店铺是被选中的，更改店铺选中状态
					item.check = false
						--this.fetchData.allchoose //并且选中店铺数量-1
				}
				this.fetchData.status = false //无论之前全选的状态，将其改为false就行
				this.fetchData.allsum -= pro.sum //商品总计价格变动
				this.fetchData.allnum -= pro.num
			},
			choose(item, pro) {
				!pro.checked ? this.choosetrue(item, pro) : this.choosefalse(item, pro)
			},
			shoptrue(item) {
				item.products.forEach((pro) => {
					pro.checked === false ? this.choosetrue(item, pro) : '' //循环店铺中的商品，先筛选出目前没选中的商品，给它执行choosetrue函数
				})
			},
			shopfalse(item) {
				item.products.forEach((pro) => {
					pro.checked === true ? this.choosefalse(item, pro) : ' ' //循环店铺中的商品，先筛选出目前被选中的商品，给它执行choosefalse函数
				})
			},
			shopchoose(item) {
				!item.check ? this.shoptrue(item) : this.shopfalse(item)
			},
			cartchoose() {
				this.fetchData.status = !this.fetchData.status //取反改变状态
				this.fetchData.status ? this.fetchData.list.forEach((item) => this.shoptrue(item)) : this.fetchData.list.forEach((item) => this.shopfalse(item)) //根据取反后的状态进行相应的店铺按钮操作   
			},
			add(pro) {
				pro.num++
					pro.checked ? this.fetchData.allnum++ : ''
				pro.sum += pro.price
				pro.checked ? this.fetchData.allsum += pro.price : this.fetchData.allsum
			},
			reduce(pro) {
				if(pro.num === 1) {
					pro.num
				} else {
					pro.num--
						pro.checked ? this.fetchData.allnum-- : ''
					pro.sum -= pro.price
					pro.checked ? this.fetchData.allsum -= pro.price : this.fetchData.allsum
				}
			},
			calculate(pro) {
				let oldsum = pro.sum //之前的总价
				let oldnum = oldsum / pro.price //之前的数量
				pro.num = parseInt(pro.num) //现在的数量
				pro.num > 0 ? pro.sum = pro.num * pro.price : pro.num = oldnum //如果输入数量大于0，计算价格，否则返回之前的数量
				let diffsum = pro.sum - oldsum //差价
				let diffnum = pro.num - oldnum //差量
				if(pro.checked) { //如果商品被选中                        
					this.fetchData.allsum += diffsum //计算总价
					this.fetchData.allnum += diffnum //计算总量
				}
			}
		},
		components: {

		}
	}
</script>

<style scoped>
	a {
		text-decoration: none;
		color: dimgray;
	}

	label{
    position: relative;
    display: inline-block;
    z-index: 1;
    border: 1px solid #b8b8b8;
    margin-left: -1.7rem;
    border-radius: 1px;
    width: 10px;
    height: 11px;
    cursor: pointer;
}
label.mark{
    background: url("../../assets/liu/mark.png") no-repeat;
}
.header {
		height: 2%;
		position: relative;
	}
	
	.header img {
		width: 2.5rem;
		padding-left: 0.6rem;
		padding-top: 0.5rem;
	}
	
	.header span {
		font-size: 1.5rem;
		position: absolute;
		left: 43%;
		top: 28%;
	}
	.cartMain_hd {
		height: 5rem;
		border-top: 1px solid lightgray;
		border-bottom: 1px solid lightgray;
		margin-top: 0.6rem;
	}
	
	.cartMain_hd .order_lists {
		display: flex;
		justify-content: space-around;
	}
	
	.shop_info {
		height: 3rem;
		border-bottom: 1px solid lightgray;
		position: relative;
	}
	
	.cartBox input {
		margin-left: 2.4rem;
	}
	
	.shop_name {
		margin-left: 3.7rem;
		margin-top: -1.6rem;
	}
	
	.order_content {
		height: 10rem;
		border-bottom: 1px solid lightgray;
		position: relative;
	}
	
	.order_content .list_text {
		margin-left: 28%;
		margin-top: -3rem;
	}
	
	.order_content .list_custom {
		display: block;
		line-height: 2rem;
		width: 4rem;
		background: orange;
		border-radius: 0.2rem;
		color: white;
		text-align: center;
	}
	
	.order_content .price {
		margin-left: 48%;
		margin-top: -3.5rem;
	}
	
	.order_content .charge p {
		margin-left: 48%;
		margin-top: 0.1rem;
		line-height: 2rem;
		width: 4rem;
		border: 1px solid red;
		color: red;
		text-align: center;
	}
	
	.order_content .reduce {
		display: block;
		width: 1.5rem;
		line-height: 2rem;
		background: lightgray;
		text-align: center;
		margin-left: 70%;
		margin-top: -3.5rem;
	}
	
	.order_content .amount_box {
		position: relative;
	}
	
	.order_content .sum {
		width: 1.3rem;
		line-height: 1.7rem;
		border: 1px solid lightgray;
		text-align: center;
		position: absolute;
		left: 67.2%;
		top: 0rem;
	}
	
	.order_content .plus {
		display: block;
		width: 1.5rem;
		line-height: 2rem;
		background: lightgray;
		text-align: center;
		margin-left: 79%;
		margin-top: -2rem;
	}
	
	.order_content .sum_price {
		margin-left: 88%;
		margin-top: -2.3rem;
	}
	/*底部总计算价*/
	
	.bar-wrapper {
		height: 3.2rem;
		position: fixed;
		bottom: -1px;
		z-index: 99;
		background: #e5e5e5;
	}
	
	.bar-wrapper .bar-right {
		float: right;
		color: #3c3c3c;
		margin-left: 2rem;
	}
	
	.bar-wrapper .bar-right strong {
		color: #900;
	}
	
	.bar-wrapper .bar-right .piece {
		float: left;
		min-width: 6.8rem;
		margin-right: 4rem;
		height: 3.2rem;
		line-height: 3.2rem;
	}
	
	.bar-wrapper .bar-right .piece .piece_num {
		display: inline-block;
		padding: 0 10px;
		font-weight: 700;
		font-size: 18px;
		font-family: tohoma, arial;
	}
	
	.bar-wrapper .bar-right .totalMoney {
		float: left;
		min-width: 6.25rem;
		height: 3.2rem;
		line-height: 3.2rem;
	}
	
	.bar-wrapper .bar-right .totalMoney .total_text {
		float: right;
		font-weight: 400;
		font-size: 20px;
		font-family: Arial;
		vertical-align: middle;
		margin-right: 1rem;
		margin-left: 1rem;
	}
	
	.bar-wrapper .bar-right .calBtn {
		float: left;
	}
	
	.bar-wrapper .bar-right .calBtn a {
		display: block;
		width: 10rem;
		height: 3.2rem;
		color: #fff;
		background: #B0B0B0;
		cursor: not-allowed;
		font-size: 1.375rem;
		letter-spacing: 0.3125rem;
		text-decoration: none;
		line-height: 3.2rem;
		text-align: center;
		border-radius: 2px;
	}
	
	.bar-wrapper .bar-right .calBtn a.btn_sty {
		background: #ff873e;
		cursor: pointer;
	}
</style>